<template>
	<view>
		<!-- banner -->
		<view class="banner" style="width:100%;height:420rpx;">
			<image class="" :src="imgURL3+'shop/shop.png'" mode="aspectFill" style="width: 100%; height: 100%;">
			</image>
		</view>

		<view style="position: absolute; margin-top: -40rpx; width: 100%; padding-bottom: 200rpx;" class="">
			<view class=" flex-column-c">
				<view class=" border-radius flex-column-c bg-white" style="width: 100%;height: fit-content;">
					<!-- 搜索框 -->
					<view class=" margin-top-com flex-row margin-lr-com"
						style="width: 100%;height:50px;justify-content: center;">
						<uni-search-bar style="align-items: center;width:100%;height:100%" v-model="shop_params.productName" clearButton="auto" cancelButton="none" radius="20"
							@confirm="search" @clear="cancel_search"></uni-search-bar>
					</view>
					<!-- 筛选1 -->
					<view class=" padding-lr-com" style="margin-right: auto;">
						<zb-tab v-if="category.show" :scrollable="true" :shrink="true"
							:activeStyle="{fontWeight: 'bold',transform: 'scale(1.1)',color:'#EE3F4D'}"
							v-model="category.current" :data="category.list" @change="change_tab"></zb-tab>
					</view>
					<!-- 筛选2 -->
					<view class="second flex-row" style="margin-left: auto;font-size: 30rpx;height:70rpx">
						<filter-shop :current="0" :list="shopselect.list"
							v-on:shopselect_change="shopselect_change"></filter-shop>
					</view>
				</view>


				<!-- 瀑布流 -->
				<view class="waterfall margin-top-sm" style="width:100%">
					<uv-waterfall ref="waterfall" v-model="goods.list" :add-time="10" :left-gap="goods.leftGap"
						:right-gap="goods.rightGap" :column-gap="goods.columnGap" @changeList="changeList">
						<!-- 第一列数据 -->
						<template v-slot:list1>
							<!-- 为了磨平部分平台的BUG，必须套一层view -->
							<view>
								<view v-for="item in goods.list1" :key="item.id" @click="onDetails(item.id)"
									class="waterfall-item border-radius-shadow bg-white">
									<view class="waterfall-item__image">
										<image :src="imgURL+item.indexImg" mode="widthFix" style="width: 100%;"></image>
									</view>
									<view class="waterfall-item__ft">
										<view class="" style="font-weight: bold;">{{item.productName}}</view>
										<view class="text-bold theme-color text-lg margin-top-xs"
											style="font-size: 40rpx;">
											￥{{item.monovalent}}</view>
										<view class="margin-top-xs">
											<text class="text-sm">剩余库存：</text>
											<text class="text-bold theme-color text-lg">{{ item.inventory }}</text>
										</view>
									</view>
								</view>
							</view>
						</template>
						<!-- 第二列数据 -->
						<template v-slot:list2>
							<!-- 为了磨平部分平台的BUG，必须套一层view -->
							<view>
								<view v-for="item in goods.list2" :key="item.id" @click="onDetails(item.id)"
									class="waterfall-item border-radius-shadow bg-white">
									<view class="waterfall-item__image">
										<image :src="imgURL+item.indexImg" mode="widthFix" style="width: 100%;"></image>
									</view>
									<view class="waterfall-item__ft">
										<view class="" style="font-weight: bold;">{{item.productName}}</view>
										<view class="text-bold theme-color text-lg margin-top-xs"
											style="font-size: 40rpx;">
											￥{{item.monovalent}}</view>
										<view class="margin-top-xs">
											<text class="text-sm">剩余库存：</text>
											<text class="text-bold theme-color text-lg">{{item.inventory}}</text>
										</view>
									</view>
								</view>
							</view>
						</template>
					</uv-waterfall>
				</view>
				<!-- 瀑布流 -->

			</view>
			<!-- 分割线 -->
			<divider marginTop="40px" marginBottom="40px"></divider>
			<!-- 购物车 -->
			<view
				style="position: fixed; bottom: 100rpx; right: 0;width:70px;height:70px;border-radius: 50%;margin-left: auto;"
				@click="tocart">
				<image :src="imgURL3+'shop/button.png'" mode="aspectFill" style="width:100%;height:100%;"></image>
			</view>
		</view>
	</view>
	<!-- 接口请求加载动画 -->
	<loading></loading>
</template>

<script setup lang="ts">
	import { imgURL3 } from '../../api/request';
	import { ref, reactive } from 'vue';
	import { onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app"
	import { getProduct, getNameAndId } from "../../api/shop/shop"
	import { imgURL } from '../../api/request';

	//tabs--绑定当前选中标签的标识符
	//const current = ref(0)
	const category = reactive({
		current: 0,
		show: false,
		list: []
	})

	onLoad(() => {
		// 获取商品分类
		get_category()
		// 请求上架商品
		get_Shop()
	})

	// 获取分类筛选1
	const get_category = () => {
		getNameAndId().then((res : any) => {
			console.log('code' + JSON.stringify(res.data))
			for (let i = 0; i < res.data.length; i++) {
				category.list.push({
					name: res.data[i].categoryName,
					value: res.data[i].id
				})
			}
			category.current = category.list[0].value
			shop_params.categoryId = category.list[0].value
			category.show = true
		})
	}
	//tab切换
	const change_tab = (item : { value : string; }) => {
		goods.list = [];
		waterfall.value.clear();
		goods.list1 = [];
		goods.list2 = [];
		shop_params.categoryId = item.value
		shop_params.current = 1
		getProduct(shop_params).then((res : any) => {
			goods.list = JSON.parse(JSON.stringify(res.data.list))
		})
	}
	//筛选2列表
	const shopselect = reactive({
		//input: '',
		list: [{
			name: '综合',
			isLifting: false //是否升降排序
		}, {
			name: '销量',
			isLifting: false //是否升降排序
		}, {
			name: '价格',
			isLifting: true //是否升降排序
		}]
	})
	//商品,瀑布流
	let goods = reactive({
		list: [
				{
				"id": "1",
				"productName": "瑞士卷",
				"inventory": 500,
				"productStatus": null,
				"salesVolume": 0,
				"monovalent": "20.10",
				"detailsId": null,
				"area": null,
				"categoryId": null,
				"createBy": null,
				"createTime": "2024-04-01 10:36",
				"updateBy": null,
				"updateTime": null,
				"remark": null,
				"indexImg": "/profile/product/2024/04/03/Snipaste_2024-04-02_17-15-41_20240403113542A007.png"

			}
		],
		// 瀑布流全部数据
		list1: [],// 瀑布流第一列数据
		list2: [],// 瀑布流第二列数据
		leftGap: 15,
		rightGap: 15,
		columnGap: 15,
	})

	//请求参数
	const shop_params = reactive({
		categoryId: '1',
		productName: '',
		current: 1,
		size: 6
	})
	// 瀑布流
	const waterfall = ref(null)
	//

	//触底刷新
	onReachBottom(() => {
		shop_params.current++
		getProduct(shop_params).then((res : any) => {
			for (let i = 0; i < res.data.list.length; i++) {
				goods.list.push(res.data.list[i])
			}
		})
	})

	// 下拉刷新
	onPullDownRefresh(() => {
		console.log('refresh');
		goods.list = [];
		waterfall.value.clear();
		goods.list1 = [];
		goods.list2 = [];
		//请求上架商品
		get_Shop()
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	})
	// 请求上架商品
	const get_Shop = () => {
		shop_params.current = 1
		getProduct(shop_params).then((res : any) => {
			goods.list = res.data.list
		})
	}
	//搜索
	const search = () => {
		shop_params.current = 1
		goods.list = [];
		waterfall.value.clear();
		goods.list1 = [];
		goods.list2 = [];
		getProduct(shop_params).then((res : any) => {
			goods.list = JSON.parse(JSON.stringify(res.data.list))
		})
	}

	//取消搜索
	const cancel_search = () => {
		shop_params.current = 1
		shop_params.productName = ''
		goods.list = [];
		waterfall.value.clear();
		goods.list1 = [];
		goods.list2 = [];
		getProduct(shop_params).then((res : any) => {
			goods.list = JSON.parse(JSON.stringify(res.data.list))
		})
	}
	// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
	const changeList = (e) => {
		goods[e.name].push(e.value);
	}


	const shopselect_change = (e) => {
		console.log(JSON.stringify(e))
	}


	//跳转商品详情
	const onDetails = (id : string) => {
		console.log('跳转前' + id)
		uni.navigateTo({
			url: '/pages/shop/shop-detail?id=' + id
		});
		// uni.showToast({
		// 			title: '功能正在开发中...',
		// 			icon: 'none',
		// 			duration: 2000
		// 		});
	}
	const tocart = () => {
		// uni.navigateTo({
		//   url: '/pages/shop/shop-cart'
		// });
		uni.showToast({
			title: '功能正在开发中...',
			icon: 'none',
			duration: 2000
		});
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.waterfall-item {
		overflow: hidden;
		margin-bottom: 30rpx;
		border-radius: 6px;
	}

	.waterfall-item__ft {
		padding: 20rpx;
		// background: #fff;
	}
</style>
